body{
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 最小高度 */
    min-height: 100vh;
    /* 视距 眼睛到屏幕的距离 */
    perspective: 1000px;
}

.olympic-rings{
    width: 800px;
    min-width: 800px;
    height: 370px;
    min-height: 370px;
    /* css3径向渐变radial-gradient */
    /* circle 圆 */ 
    /* transparent  透明 */
    background-image: 
        radial-gradient(circle,transparent 58%,#0081c8 58%,#0081c8 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#000 58%,#000 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#EE334E 58%,#EE334E 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#FCB131 58%,#FCB131 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#00A651 58%,#00A651 70%,transparent 70%);

    /* 背景图像起始位置 */
    background-position: 
        0% 0%,
        50% 0%,
        100% 0%,
        25% 100%,
        75% 100%;   
      /* 背景图片不平铺   */        
    background-repeat: no-repeat;  
    background-size: 250px 250px;   

    /* 相对定位 */
    position: relative;

    animation: rotate 5s ease-in-out infinite;

}

@keyframes rotate{
    0%,100%{
        transform: rotateY(30deg);
    }
    50%{
        transform: rotateY(-30deg);
    }
}

  /* inherit使用指定给父元素的所有值 */
.olympic-rings::before,
.olympic-rings::after{
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    /* circle 圆 */ 
    /* transparent  透明 */
    background-image: 
        radial-gradient(circle,transparent 58%,#FCB131 58%,#FCB131 70%,transparent 70%),
         radial-gradient(circle,transparent 58%,#00A651 58%,#00A651 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#0081c8 58%,#0081c8 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#000 58%,#000 70%,transparent 70%),
        radial-gradient(circle,transparent 58%,#EE334E 58%,#EE334E 70%,transparent 70%);

    background-position: 
        25% 100%,
        75% 100%,
        0% 0%,
        50% 0%,
        100% 0%;
    background-repeat: inherit;
    background-size: inherit;    
    position: absolute;
    top: 0;
    left: 0;    
}

/* clip-path: polygon(); 
    clip-path裁剪
    polygon 多边形
*/
.olympic-rings::before{
    clip-path: polygon(33% 28%, 39% 28%, 39% 67%, 16% 67%, 16% 57%, 33% 57%);
}

.olympic-rings::after{
    clip-path: polygon(68% 28%, 72% 28%, 72% 67%, 50% 67%, 50% 57%, 68% 57%);
}